<template>
  <div class="new-card">
    <div class="colors">
      <p
        class="color-li"
        v-for="(item, index) in cardColor1"
        :key="index"
        :style="{ background: item }"
      ></p>
    </div>
  </div>
</template>

<script>
import { cardColor, cardColor1 } from "@/utils/data";
export default {
  data() {
    return {
      cardColor,
      cardColor1,
    };
  },
  props: {},
};
</script>

<style lang="scss" scoped>
.new-card {
  .colors {
    .color-li {
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }
    .color-selected {
      border: 1px solid;
    }
  }
}
</style>